<template>
  <div>
    <div class="container">
      <!-- 热门评论头部标题 -->
      <div class="container-title">
        热门评论<svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class=""
        >
          <path
            data-v-5fe91717=""
            d="M12.8 5.2C13.9532 6.46 14.8 8.2 14.8 10C14.7039 12.8937 12.6843 15.1706 9.97973 15.8159C10.359 12.3442 7.77588 9.35406 7.77588 9.35406C7.77588 9.35406 7.99512 13.7064 6.79514 15.8104C4.03715 15.1428 2 12.7806 2 9.8C2 7.776 2.9336 5.9728 4.4 4.8C5.8608 3.7056 6.8 1.9656 6.8 0C9.684 0.4368 11.894 2.9264 11.894 5.932C11.894 6.5012 11.746 7.0652 11.6 7.6C12.1264 6.9024 12.6184 6.0876 12.8 5.2Z"
            fill="#F53F3F"
          ></path>
        </svg>
      </div>
      <!-- 热门评论内容 -->
      <div class="container-content">
        <!-- 左侧用户头像 -->
        <div class="content-left">
          <img
            src="https://p6-passport.byteacctimg.com/img/user-avatar/f0b59a6a5aaf94a5744b7d246ee74f8b~300x300.image"
            alt=""
          />
        </div>
        <!-- 右侧评论详情 -->
        <div class="content-right">
          <div class="comment-main__title">
            <div class="user-name">呐呐呐呐呢</div>
            <div class="jueyou-level">
              <img
                src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/8c6985e2aa4c06f307ae3734da4b43ac.svg"
                alt=""
              />
            </div>
            <div class="comment-date">1天前</div>
          </div>
          <div class="comment-content">
            我的建议是win+q或者磁铁，桌面任务栏什么都不用放
          </div>
          <div class="interaction">
            <div class="item">
              <!-- 点赞 -->
              <svg
                t="1661408093477"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9806"
                width="16"
                height="16"
              >
                <path
                  d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                  p-id="9807"
                  fill="#333333"
                ></path>
              </svg>
              <p>1</p>
            </div>
            <!-- 评论 -->
            <div class="item">
              <svg
                t="1661408208000"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="10824"
                width="16"
                height="16"
              >
                <path
                  d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
                  fill="#3D3D3D"
                  p-id="10825"
                ></path>
              </svg>
              <p>0</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  padding-top: 32px;

  &-title {
    position: relative;
    padding-bottom: 8px;
    font-weight: 600;
    font-size: 18px;
    color: #252933;
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 30px;

    svg {
      margin: 0 8px;
    }
  }
  &-content {
    display: flex;
    padding: 16px 0;

    .content-left {
      width: 40px;

      a {
        flex: 0 0 auto;
      }

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    .content-right {
      flex: 1 1 auto;
      margin-left: 16px;
      float: right;

      .comment-main__title {
        display: flex;
        align-items: center;
        height: 26px;
        line-height: 26px;
        width: 100%;

        .user-name {
          float: left;
          cursor: pointer;
        }
        .jueyou-level {
          width: 3.75rem;
          height: 1.3333rem;
          -o-object-fit: contain;
          object-fit: contain;
        }
        .comment-date {
          font-size: 14px;
          color: #8a919f;
          line-height: 22px;
        }
      }
      .comment-content {
        font-weight: 400;
        font-size: 14px;
        line-height: 2rem;
        color: #515767;
        margin-top: 8px;
        -webkit-line-clamp: 6;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
      }
      .interaction {
        display: flex;
        align-items: center;
        margin-top: 8px;

        .item {
          margin-right: 16px;
          line-height: 22px;
          font-size: 14px;
          cursor: pointer;
          color: #8a919f;
          display: flex;
          align-items: center;
        }
      }
      .subcomment-wrapper {
        margin-top: 16px;
        padding: 16px;
        background: rgba(247, 248, 250, 0.7);
        border-radius: 4px;
        .subcomment {
          display: flex;

          .sub-comment {
            flex: 1 1 auto;
            margin-left: 16px;
            float: right;
          }
          .sub-comment-right {
            flex: 1 1 auto;
            margin-left: 16px;
            float: right;

            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
</style>
